﻿@{
    ViewData["Title"] = "表单设计器";
    Layout = "~/Views/Shared/_LayoutWithTree.cshtml";
}

@section Left {
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li lay-id="code" class="layui-this">资源管理器</li>
        </ul>
        <div id="tree"></div>
    </div>
}
@section Main {
    <div class="layui-tab layui-tab-brief">
        <input type="hidden" id="id" value="0" />
        <input type="hidden" id="name" value="" />
        <ul class="layui-tab-title">
            <li lay-id="code" class="layui-this">html</li>
            <li lay-id="preview">javascript</li>
        </ul>
        <div class="layui-code-tools">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal" id="btnDesigner">
                    表单设计
                </button>
                <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal" id="btnAdd">
                    新建
                </button>
                <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal layui-btn-disabled" id="btnSave">
                    <i class="layui-icon"></i> 保存
                </button>
            </div>
            <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal layui-btn-disabled" id="btnRun">
                <i class="layui-icon layui-icon-triangle-r"></i> 预览
            </button>
        </div>
        <div class="layui-tab-content layui-padding-2">
            <div class="layui-tab-item layui-show">
                <pre id="editorHtml" style="height: calc(100vh - 80px)"></pre>
            </div>
            <div class="layui-tab-item">
                <pre id="editorJavascript" style="height: calc(100vh - 80px)"></pre>
            </div>
        </div>
    </div>
}

@section scripts {
    <script src="/component/libs/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var editorHtml = ace.edit("editorHtml");
        var editorJavascript = ace.edit("editorJavascript");
        editorHtml.session.setMode("ace/mode/html");
        editorJavascript.session.setMode("ace/mode/javascript");
        //
        var app = {};
        layui.use(['http', 'tools', 'toast'], function () {
            var tree = layui.tree,
                $ = layui.$,
                http = layui.http,
                tools = layui.tools,
                toast = layui.toast;
            //
            app.load = function (id) {
                http.get('/api/sysCustomForm/get/' + id).then((res) => {
                    if (res.code == 200) {
                        $('#btnRun').removeClass('layui-btn-disabled');
                        $('#btnSave').removeClass('layui-btn-disabled');
                        $('#id').val(id);
                        $('#name').val(res.result.name);
                        editorHtml.setValue(res.result.html);
                        editorJavascript.setValue(res.result.js);
                    }
                })
            }
            app.delete = function (id) {
                http.post('/api/sysCustomForm/delete', { id }).then((res) => {
                    if (res.code == 200) {
                        toast.success({ message: '删除成功！' });
                    }
                    else {
                        layer.alert('删除失败，错误信息' + res.message, { icon: 2 });
                    }
                })
            }
            app.update = function (data) {
                http.post('/api/sysCustomForm/update', data).then((res) => {
                    if (res.code == 200) {
                        toast.success({ message: '保存成功！' });
                    }
                    else {
                        layer.alert('保存失败，错误信息' + res.message, { icon: 2 });
                    }
                })
            }
            //
            app.loadTree = function () {
                http.get('/api/sysCustomForm/list').then(res => {
                    tree.render({
                        showLine: true,
                        showCheckbox: false,
                        edit: ['update', 'del'],
                        customName: {
                            title: 'name'
                        },
                        id: 'tree-id-1',
                        elem: '#tree',
                        data: res.result,
                        click: function (obj) {
                            app.load(obj.data.id);
                        },
                        operate: function (obj) {
                            var type = obj.type; // 得到操作类型：add、edit、del
                            var data = obj.data; // 得到当前节点的数据
                            //
                            if (type == 'del') {
                                app.delete(data.id);
                            }
                            else if (type == 'update') {
                                app.update({ id: data.id, name: data.name });
                            };
                        }
                    });
                })
            }

            //
            app.init = function () {
                $('#btnAdd').on('click', function (e) {
                    tools.open({
                        area: ['700px', '100%'],
                        content: './add',
                        title: '新增',
                        yes: function (index, layero) {
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            iframeWin.app.save().then((res) => {
                                if (res.code == 200) {
                                    app.loadTree();
                                    toast.success({ message: '添加成功' });
                                    layer.close(index);
                                }
                                else {
                                    toast.error({ message: res.message });
                                }
                            });
                        }
                    });
                })
                $('#btnSave').on('click', function (e) {
                    var data = {
                        id: $('#id').val(),
                        name: $('#name').val(),
                        html: editorHtml.getValue(),
                        js: editorJavascript.getValue()
                    }
                    app.update(data);
                });

                $('#btnRun').on('click', function (e) {
                    var data = {
                        id: $('#id').val(),
                        title: '测试表单',
                        url: './run?id=' + $('#id').val(),
                        close: true
                    }
                    parent.changePage(data);
                });

                $('#btnDesigner').on('click', function (e) {
                    var data = {
                        id: $('#id').val(),
                        title: '可视表单设计',
                        url: '/form/formDesigner',
                        close: true
                    }
                    parent.changePage(data);
                });
                //加载树
                app.loadTree();
            }();
        });
    </script>
}